import {ref,onMounted,onUnmounted} from 'vue'
// hooks文件的命名规则 usexxx
export default function useGetMousePosition(){
    const x=ref(0)
    const y=ref(0)

    // 绑定的事件对应的回调函数
    const updatePosition=(e:MouseEvent)=>{
      x.value=e.pageX
      y.value=e.pageY
    }

    // 点击界面获取x y的坐标
    // 浏览器界面 document document上绑定事件 DOM
    // 什么时候能操作DOM setup是在beforeCreate之前创建的直接操作不可以
    // 在mounted时是最早可以操作DOM元素的时刻 vue3当中的mounted onMounted
    onMounted(()=>{
      // 在此时是最早能操作DOM的时刻
      document.addEventListener('click',updatePosition)
    })

    // 离开取消事件
    onUnmounted(()=>{
      // 离开取消addEventListener绑定的事件
      document.removeEventListener('click',updatePosition)
    })

    // 函数是否需要有返回值 函数模块的功能是获取xy的坐标
    return{
        x,
        y,
    }
}
